后台自定义json， File，Single line text字段使用
一、后台给产品自定义gallery-scenario字段操作如下：
登录到 Shopify 后台：首先，登录到你的 Shopify 商户账号。
选择产品：进入要编辑的产品页面。
进入 Metafields 配置页面：
在产品编辑页面的右侧菜单中，找到并点击 Metafields 选项。
如果尚未创建任何 Metafield，则需要先创建一个新的 Metafield 配置。
如果已经有了 Metafield 配置，直接点击 Add a Metafield 添加一个新的 Metafield。
填写 Metafield 详细信息：
Namespace：命名空间，可以是
custom或其他自定义的命名空间。命名空间用于将 Metafields 组织在一起，以防止冲突。Key：键名，例如
gallery-scenario。这是 Metafield 的唯一标识符，通过该键名在 Liquid 模板中获取数据。Value Type：值的类型，选择
JSON。这将允许你在该 Metafield 中存储 JSON 格式的数据。Value：在这里填入包含图片信息的 JSON 数据，例如：
jsonCopy code[ {"title": "Image 1", "url": "https://example.com/image1.jpg"}, {"title": "Image 2", "url": "https://example.com/image2.png"}, {"title": "Image 3", "url": "https://example.com/image3.gif"}]Visibility：可见性选项，根据需要选择公开或者仅内部使用。
保存 Metafield：填写完 Metafield 后，确保点击 Save 或 Save Metafield 保存更改。
注意事项：
命名空间和键名：确保命名空间和键名的唯一性，以防止与其他 Metafields 冲突。
JSON 数据格式：确保在 Value 字段中输入正确的 JSON 格式数据，包含所需的图片信息。
保存并验证：保存 Metafield 后，可以在产品页面的 Metafields 列表中看到添加的
gallery-scenario字段及其值。
二、前端页面调用如下：
<!-- 将 JSON 自定义数据字符串gallery-scenario输出到页面 -->
<div id="gallery-data" style="display: none;">
{{ product.metafields.custom['gallery-scenario'] }}
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var galleryDataElement = document.getElementById('gallery-data');
if (galleryDataElement) {
var galleryData = galleryDataElement.textContent.trim();
try {
var galleryImages = JSON.parse(galleryData);
console.log('Parsed Gallery Images:', galleryImages); // 输出解析后的数据以供调试
if (Array.isArray(galleryImages) && galleryImages.length > 0) {
var tujiadContainer = document.querySelector('.project-box'); // 获取 tujiad 容器
galleryImages.forEach(function(image) {
var imgElement = document.createElement('img');
imgElement.src = image.url;
imgElement.alt = image.title;
var imgContainer = document.createElement('p');
imgContainer.appendChild(imgElement);
tujiadContainer.appendChild(imgContainer); // 将图片添加到 tujiad 容器中
});
} else {
console.log('No images found in the gallery-scenario metafield.');
}
} catch (error) {
console.error('Error parsing JSON data:', error);
}
}
});
</script>
三、多行自定义
循环
{% if product.metafields.custom_options.multi_select %}
{% for option in product.metafields.custom_options.multi_select %}
<div>{{ option }}</div>
{% endfor %}
{% endif %}
如果你想在循环中检查 option 是否等于某个特定值（例如 "Paint"），可以在 for 循环内使用 if 条件来判断并输出特定内容。下面是实现方法：
{% if product.metafields.custom.options_choose %}
<p>Options: {{ product.metafields.custom.options_choose | join: ', ' }}</p> <!-- 输出所有选项 -->
{% assign options = product.metafields.custom.options_choose | join: ', ' %} <!-- 将选项转换为字符串 -->
{% if options contains "sizing Guideline" %}
<div class="OptionsItem01">sizing Guideline</div>
{% endif %}
{% if options contains "Paint" %}
<div class="OptionsItem02">Paint</div>
{% endif %}
{% if options contains "Aerylic" %}
<div class="OptionsItem03">Aerylic</div>
{% endif %}
{% if options contains "Color Temperature & Color" %}
<div class="OptionsItem05">Color Temperature & Color</div>
{% endif %}
{% if options contains "Metal Craftsmanship" %}
<div class="OptionsItem06">Metal Craftsmanship</div>
{% endif %}
{% if options contains "Stickers" %}
<div class="OptionsItem07">Stickers</div>
{% endif %}
{% else %}
<p>No options available.</p>
{% endif %}
自定义字段为 Single line text类型调用 比如自定义了 .iocn
{%- if collection and collection.metafields.custom.iocn != blank -%}
<!-- <a class="navimg" href="{{ subitem.url }}">
<img src="{{ collection.metafields.custom.iocn | image_url: 'medium' }}" style="width:100%; height:100%;">
</a> -->
{%- endif -%}
自定义字段为 File 类型调用 比如自定义了 iconimg
{%- if collection and collection.metafields.custom.iconimg != blank -%}
<a class="navimg" href="{{ subitem.url }}">
<img src="{{ collection.metafields.custom.iconimg | file_url }}" style="width:100%; height:100%;">
</a>
{%- endif -%}
